import React, { useState } from 'react';
import { SearchOutlined } from '@ant-design/icons';
import { Input, Button } from 'antd';
import type { IOrganizingProp } from '@/sections/Organizing/index.d'
import './index.scss';

interface IActionItem {
  type?: string;
  text?: string;
  click?: React.MouseEvent<any>;
}

interface IContiner {
  leftTitle?: string;
  leftActions?: IActionItem[];
  renderLeft?: React.FC<IOrganizingProp>;
  search?: boolean;
  handleClickNode?: Function
}

let clear: any = null;

const Continer: React.FC<IContiner> = React.memo((prop) => {
  const [keyword, setKeyword] = useState<string>('');
  const {
    leftTitle,
    renderLeft,
    leftActions,
    search,
  } = prop;

  const onChange = (e: any) => {
    clearTimeout(clear)
    clear = setTimeout(() => {
      setKeyword(e.target.value)
    }, 300);
  }

  return (
    <div className='hi-global-contioner'>
      {
        renderLeft ? <div className='hi-global-contioner__left'>
          {
            leftTitle || (leftActions && leftActions.length) ? <div className="header">
              <h5>{leftTitle}</h5>
              {
                leftActions && leftActions.length ? <div className="action">
                  <Button type="text" danger>Text</Button>
                </div> : ''
              }
            </div> : ''
          }
          {
            search ? <div className="search-wrap">
              <Input onChange={onChange} placeholder="请输入关键字搜索" suffix={<SearchOutlined />} />
            </div> : ''
          }
          <div className="content">
            {renderLeft({ keyword })}
          </div>
        </div> : null
      }
      <div className='hi-global-contioner__right'>
        {prop.children}
      </div>
    </div>
  )
})

export default Continer
